<template>
  <div class="divLogin">
    <div class="mvideo"  >
          <video  
          autoplay="true"  src="http://localhost:7011/mp4/Login.mp4"
          loop="true"  >
          </video>
      </div> 
    <div class="divMain" style="">
        <div class="loginWrap">
          <lay-form-item :label-width="0">
                      <lay-input :allow-clear="true" prefix-icon="layui-icon-username" placeholder="用户名"
                        v-model="model.ename"
                        class="LoginIN"></lay-input>
                    </lay-form-item>
                    <lay-form-item :label-width="0">
                      <lay-input :allow-clear="true" 
                      prefix-icon="layui-icon-password" 
                      placeholder="密码" password
                        type="password" v-model="model.pwd"
                        class="LoginIN"
                        ></lay-input>
                    </lay-form-item>
                    <lay-form-item :label-width="0">
                      <div style="width: 264px; display: inline-block">
                        <lay-input :allow-clear="true" prefix-icon="layui-icon-vercode" placeholder="验证码"
                          v-model="model.yzmValue"
                          class="LoginIN"
                          @keydown="yzmValueKeyDown"
                          ></lay-input>
                      </div>
  
                      <div class="login-captach" @click="toRefreshImg">
                        <img style="width: 100%"
                         :src="verificationimgurl" 
                         @click="toRefreshImg"
                         alt="获取验证码" />
                      </div>
                    </lay-form-item>
                    
            
                      
                 
<!--   
                    <lay-checkbox value="" name="like" 
                    v-model="remember" skin="primary" label="1">记住密码</lay-checkbox> -->
                    <lay-form-item :label-width="0">
                      <lay-button style="margin-top: 20px" type="primary" :loading="loging" :fluid="true"
                        loadingIcon="layui-icon-loading" @click="loginSubmit">登录</lay-button>
                    </lay-form-item>
                  
        </div>
    </div>
             
  
  </div>
  
   
  </template>
  
  <script lang="ts">
  import { login } from '../../api/module/user'
  import { verificationImg, loginQrcode } from '../../api/module/commone'
  import { defineComponent, onMounted, reactive, ref ,h} from 'vue'
  import { useRouter } from 'vue-router'
  import { useUserStore } from '../../store/user'
  import { layer } from '@layui/layer-vue'
  import MyHttp from '../../library/MyHttp';
  import MyID from '../../library/MyID';
  import MyWin from "../../library/MyWin"; 
  import DeptSel from "./deptsel.vue"; 
  export default defineComponent({
    setup() {
      const baseUrl="/htlogin";
      const myWin=ref<any>(null);
      const model=reactive({
        ename:"htadmin",
        pwd:"111111",
        htplatId:"0",
        htpeptId:"0",
        loginway:"网站",
        yzmId:MyID.newGuid(),
        yzmValue:""
   
      })
      let s1=MyID.newGuid(); 
      const router = useRouter()
      const userStore = useUserStore()
      const method = ref('1')
      const verificationimgurl = ref('')
      const loging = ref(false);
      const loginQrcodeText = ref('')
      const remember = ref(false)
       
      onMounted(() => {
        myWin.value=new MyWin();
        toRefreshImg()
        // toRefreshQrcode()
      })
  
      const loginSubmit = async () => { 
        await getDept(); 
      }
      const deptList=ref<any>([]);
      const getDept=async()=>{
        let url=baseUrl+"/getdept";
         console.info(url);
        var r=await new MyHttp().post(url,model,
          { 
          }
        );  
        deptList.value=r.data;
        if(r.data.length==1){
          model.htpeptId=r.data[0].id;
          model.htplatId=r.data[0].htplatId;
          toLogin();
          return;
        }
        var opt={
            title: '选择部门',
            content: h( DeptSel, 
              {  
               data:r.data ,
               onOk:(data:any)=>{
                model.htpeptId=data.id;
                model.htplatId=data.htplatId;
                toLogin();
               }       
              }
              ), 
            w:300,
            h:400
          }; 
          myWin.value.open(opt ); 
      }
      const toLogin=async()=>{
        let url=baseUrl+"/login";
         
        var r=await new MyHttp().post(url,model,
          {
            returnErr:true 
          }
        );        
        if(r.code!=0){
          console.info("(((((((((((())))))))))))")
          toRefreshImg();
          return;
        }
        userStore.token=r.data;
        await getUserInfo();
        await getMenu();
  
        //await userStore.loadMenus();
        // await userStore.loadPermissions();
        let indexurl=(userStore.menus[0] as any).children[0].id;
            router.push(indexurl);
  
      }
      const getUserInfo=async()=>{
        let url=baseUrl+"/getUserInfo";  
         var r=await new MyHttp().post(url,{},
           { 
           }
         ); 
         userStore.userInfo=r.data; 
      } 
      const getMenu=async()=>{
        let url=baseUrl+"/getMenu";  
         var r=await new MyHttp().post(url,{},
           { 
           }
         ); 
         userStore.mymenus=r.data; 
         var Permissions:never[]=[];
         let r2=toLayMenu(null,null,Permissions);
         
         userStore.menus=r2;
         userStore.permissions=Permissions; 
      }
      interface LayMenu {
        id: string;
        icon: boolean;
        title: string;
        children?: any;
      }
      const toLayMenu=(srcmenus:any,dstmenu :LayMenu|null,
      Permissions:any  ):any=>{
        let r=new Array();
        if(srcmenus==null){
          srcmenus=userStore.mymenus;
        }else{
          r=dstmenu?.children;
        }
        
  
        srcmenus.forEach((element: { code: any; imgurl: any; 
          name: any;   lx: string;children: any }) => {
          let tv:LayMenu={
            id: element.code,
            icon: element.imgurl,
            title: element.name 
          }; 
         
          if(element.lx=="目录"){
             r.push(tv);
             tv.children=new Array();
             toLayMenu(element.children,tv,Permissions);
          } else if(element.lx=="菜单"){
            let cdid=tv.id;
            if(cdid.indexOf("/")<0){
              tv.id=`/${cdid}/index`;
            }
            r.push(tv);
            tv.children=null;
            element.children.forEach((menusq: { code: string,obj: string })=>{
              if(menusq.code.startsWith("/")){
                Permissions.push(menusq.code);
              }else{
                let sqid=cdid+":"+menusq.code;
                Permissions.push(sqid);
              }
              
              if(menusq.obj){
                  let arr=menusq.obj.split(',');
                  arr.forEach(squrl=>{
                    Permissions.push(squrl.trim() );
                  })
              }
            })
              
          }else{
            Permissions.push(tv.id);
            tv.children=null;
          }
           
        });
        
  
        return r;
      }
      const toRefreshImg = async () => {
        
        let url=MyHttp.getBaseURL()+"/htlogin/captcha?id="+model.yzmId+"&t="+Math.random() ;        
        verificationimgurl.value = url; 
      }
      const toRefreshQrcode = async () => {
        let { data, code, msg } = await loginQrcode()
        if (code == 200) {
          loginQrcodeText.value = data.data
        } else {
          layer.msg(msg, { icon: 2 })
        }
      }
      const yzmValueKeyDown=(e:any)=>{
         if(e.keyCode==13){
          toLogin();
         }
      }
  
      return {
        toRefreshQrcode,
        toRefreshImg,
        loginSubmit,
         
        remember,
        method,
        loging,
  
        verificationimgurl,
        model,
        deptList,
        yzmValueKeyDown
      }
    }
  })
  </script>
  
  <style scoped> 
  
  .divLogin{
    width: 100%;
      height: 100%;
  }
  .mvideo {
      width: 100%;
      height: 100%;
      position:absolute;
      z-index: 1;
      /* object-fit: contain */
  
  }
  .mvideo video{
     
    width: 100%;
    height: 100%;
    object-fit: fill;
  }
  .divMain{
      width: 100%;
      height: 100%;
      position:absolute;
      z-index: 2;
  }
  .loginWrap{
    width:400px;
    right: 200px;
    position:absolute;
    top:200px;
    color:white;
  }
  
   
  
  .login-captach {
      display: inline-block;
      vertical-align: bottom;
      width: 108px;
      height: 40px;
      color: var(--global-primary-color);
      margin-left: 8px;
      border-radius: 4px;
      border: 1px solid hsla(0,0%,60%,.46);
      transition: border .2s;
      box-sizing: border-box;
      background: #fff;
      overflow: hidden;
      cursor: pointer;
  }
   
  </style>
  
  <style  >
  .LoginIN  input{
    color:black !important;
    font-size:24px;
  }
  .LoginIN .layui-icon{
     color: gray
  } 
  </style>